<template>
  <!-- 固定节点模块 -->
  <div class="box">
    <div class="normal_con" >
      
      <el-popover
        ref="popover"
        placement="right"
        :title="approveName"
        width="240"
        trigger="hover"
        popper-class="person_popover"
      >
        <p class="titTab">阶段名称：</p>
        <p class="popText">{{info.appoint==1? '指定成员':info.appoint==2? '指定角色':info.appoint==3? '指定部门':'暂未选择'}}</p>
        <p class="titTab">节点解释</p>
        <p class="popText">流程固定节点，不可编辑，不可操作</p>
      </el-popover>
      <div :class="[csrClass, stateClass]" v-popover:popover>
        <div class="title">
          <div>
            <i class="el-icon-user"></i>
            <input class="approveName" @blur="changeName" type="text" v-model="approveName" :disabled='isDisabled'>
          </div>
          <span v-if="stateClass=='Ongoing'" >进行中</span>
          <!-- <i class="el-icon-close close" @click='delApprove(info)' v-show='!showZZ'></i> -->
        </div>
        <div class="cen"  @click.stop="showDrawer(info)">
          <div class="cenText" >
            <p > 
              <span >{{approveName}}</span>
            </p>
          </div>
          <div class="cenText" v-if='!cenText||cenText.length==0' style='color:red'>
            <!-- 请选择审核人 -->
          </div>
          <div class="icon">
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        
      </div>
    </div>
    
    <add :nodeInfo='info'></add>
  </div>
</template>

<script>
import add from '../addNode.vue' // 新增节点组件

import { mapState, mapMutations } from 'vuex'
export default {
  components:{
    add
  },
  props:['info'],
  data(){
    return {
      cenText:['阶段名称'],
      approveName:'',
      isDisabled:true,
      makeName:'抄送人',
      showAppr:false,
      makeUserList:[],
      isShowCC:false,
      // overList:[],
      // OngoingList:[],
      csrClass:'ini_box',
      stateClass:''
    }
  },
  computed:{
    ...mapState({
      dataList: state => state.dataList,
      overList: state => state.overList,
      OngoingList: state => state.OngoingList,
      showZZ: state => state.showZZ,
    })
  },
  watch:{
    
    makeUserList: {
      handler(newVal){
        // console.log(this.info.csr)
        // if(!this.info.csr){
        //   this.info.csr = []
        //   this.info.csr.splice(0,this.info.csr.length,...newVal)
        // }else{
        //   this.info.csr.splice(0,this.info.csr.length,...newVal)
        // }
        this.info.csr = newVal
        if(this.info.csr&&this.info.csr.length>0){
          this.csrClass = 'ini_box'
        }else{
          this.csrClass = 'ini_box1'
        }
      },
      deep:true
    },
  },
  mounted(){
    this.approveName = this.info.name
    if(this.info.csr&&this.info.csr.length>0){
      this.csrClass = 'ini_box'
    }else{
      this.csrClass = 'ini_box1'
    }
    if(this.OngoingList.indexOf(this.info.key+'')!=-1){
      this.stateClass = 'Ongoing'
    }else if(this.overList.indexOf(this.info.key+'')!=-1){
      this.stateClass = 'overClass'
    }else{
      this.stateClass = ''
    }
    
  },
  methods:{
    ...mapMutations([
      'setApprover'
    ]),
    delCC(infoData){
      this.$confirm('确定要删除此节点下所有的抄送人么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          infoData.csr = null
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
                   
        });
    },
    delApprove(infoData){
      this.recurrenceFun(this.dataList,infoData)
    },
    recurrenceFun(list,infoData){
      list.forEach((item,index) => {
        if(item.children&&item.children.length>0){ // 有children的时候要递归循环
          this.recurrenceFun(item.children,infoData)
        }else{ // 没有children就正常判断找id
          if(item.stepId==infoData.stepId){ 
            if(index==list.length-1&&index!=0){ // 如果是线路最后一个直接删除末尾元素
              console.log(1111111)
              list[index-1].isEnd = 1
              list.pop()
              console.log(this.dataList,'------------删除后处理后的数据---------')
            }else if(index==0){  // 如果是线路第一个直接删除第一个元素
              console.log(22222)
              if(list.length==1){
                // this.$message.error('每条线路最少保存一个审核人，如需删除请直接删除线路');
                this.$emit('delLin',infoData.prevStepId)
              }else{
                list.shift()
              }
              
              
            }else{ // 删除元素在中间的时候要进行prev的赋值等操作
              console.log(3333)
              list[index+1].prevStepId = list[index-1].stepId
              list.splice(index,1)
            }
            
          }
        }
      });
    },
    showDrawer(){
      this.showAppr = true
    },
    hideAppr(){
      this.showAppr = false
    },
    changeName(){
      this.info.name = this.approveName  //偷懒写法，不建议这样搞，会导致数据流向是混乱的
      console.log(this.dataList[1])
    },
    showCC(){ //展示抄送人设置模块
      this.isShowCC = true 	
    },
    hideCopy(){
      this.isShowCC = false
    }
  }
}
</script>

<style scoped>
.box{
  position: relative;
}
.normal_con{
  display: flex;
  align-items: center;
  justify-content: center;
}
.ini_box{
  width: 240px;
  height: 100px;
  border: 1px solid #ccc;
  /* margin: 0 auto; */
  margin-left: 400px;
  border-radius: 5px;
  overflow: hidden;
  cursor: no-drop;
}
.Ongoing{
  border: 1px solid #47f11d !important;
  box-shadow: 0 0 10px #47f11d !important;
}
.overClass{
  filter:grayscale(100%);
}
.ini_box1{
  width: 240px;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 5px;
  /* margin-left: 400px; */
  overflow: hidden;
  cursor: no-drop;
}
.ini_box:hover{
  border: 1px solid #1d9cf1;
  box-shadow: 0 0 5px #1d9cf1;
}
.ini_box1:hover{
  border: 1px solid #1d9cf1;
  box-shadow: 0 0 5px #1d9cf1;
}
.box:before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 0;
  height: 12px;
  border-style: solid;
  border-width: 8px 6px 4px;
  border-color: #cacaca transparent transparent;
  background: #e6e6e6;
}
.title{
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #e44e13;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}
.close{
  font-size: 18px;
  cursor: no-drop;
}
.cen{
  display: flex;
  align-items: center;
  height: 70px;
  line-height: 30px;
  padding: 5px;
  box-sizing: border-box;
  background: #fff;
  color: #222;
  cursor: no-drop;
}
.cenText{
  width: 200px;
  display: flex;
}
.icon{
  width: 40px;
  text-align: center;
}
.approveName{
  border: none;
  background: #e44e13;
  text-align: left;
}

.CC_lin{
  width: 160px;
  height: 2px;
  background: #ccc;
}
.CC_box{
  width: 240px;
  height: 100px;
  border: 1px solid #ccc;
  /* margin: 0 auto; */
  border-radius: 5px;
  overflow: hidden;
}
.CC .title{
  background: #2c85da;
}
.makeName{
  border: none;
  background: #2c85da;
  text-align: left;
}
.titTab{
  color: #1d9cf1;
  margin: 10px 0 ;
  font-size: 14px;
}
.popText{
  padding-left: 10px;
}
</style>